<template>
	<view class="mine-page" id="mine-page">
		<view class="myheader-wraper">
			<image class="bg" :src="userInfo.avatarUrl" mode="aspectFill"></image>
			<view class="info-wraper">
				<z-header :statics="true" background="none" border-none>个人中心</z-header>
				<view class="avatar-wraper"><avatar class="avatar" :src="userInfo.avatarUrl" circle lg></avatar></view>
				<view class="name">{{userInfo.name}}</view>
				<view class="web-font-thin description">{{userInfo.description}}</view>
				<view class="fans-focus-like">
					<view class="item" @click="currentList=0">{{userInfo.fans}}<text class="web-font-thin">粉丝</text></view>
					<view class="item" @click="currentList=1">{{userInfo.focus}}<text class="web-font-thin">关注</text></view>
					<view class="item" @click="currentList=2">{{userInfo.like}}<text class="web-font-thin">收藏</text></view>
				</view>
				<view class="web-font-thin list-title">{{mapList[currentList]}}</view>
			</view>
		</view>
		<view v-if="currentList===0" class="myfans-list-wraper">
			<author-item class="author-item" v-for="(v, i) in authorList[currentList]" :key="i" :item="v"></author-item>
		</view>
		<view v-if="currentList===1">
			<swipeout zClass="swipout-item" v-for="(v, i) in authorList[currentList]" :key="i">
				<author-item class="author-item" :item="v"></author-item>
				<view slot="menu" class="cancel-btn">取消关注</view>
			</swipeout>
		</view>
		<view v-if="currentList===2">
			<swipeout class="swipout-item" v-for="(v, i) in list" :key="i">
				<play-item class="play-item" :item="v"></play-item>
				<view slot="menu" class="cancel-btn">取消收藏</view>
			</swipeout>
		</view>
		<loading-foot :status="footLoadStatus"></loading-foot>
	</view>
</template>

<script>
	import authorItem from './author-item'
	import playItem from '@/pages/play/listitem'
	import swipeout from '@/components/zp/feedback/swipeout/swipeout'
	export default {
		components: {
			'author-item': authorItem,
			'play-item': playItem,
			swipeout
		},
		mounted() {
			setTimeout(()=>{
				this.footLoadStatus = 'loaded'
			}, 3000)
		},
		data() {
			return {
				footLoadStatus: 'loading',
				userInfo: {
					avatarUrl: '/static/avatar3.jpg',
					name: 'Mark Robertson',
					description: 'UI设计师，音乐爱好者',
					fans: '2,080',
					focus: '49',
					like: '24'
				},
				currentList: 0,
				mapList: ['我的粉丝', '我的关注', '播放列表(收藏)'],
				list: [
					{_id:'1', name:'Concerning Hobbits', previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: false, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:20:23'},
					{_id:'2', name:'如何做自我清理',previewImg:'/static/play/item-bg-2.jpg', avatarUrl:'/static/avatar2.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:12:23'},
					{_id:'3', name:'Firestone2 Concerning Hobbits',previewImg:'/static/play/item-bg-3.jpg', avatarUrl:'/static/avatar3.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:32:43'},
					{_id:'4', name:'Firestone3',previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:05:09'},
					{_id:'5', name:'Firestone4',previewImg:'/static/play/item-bg-2.jpg', avatarUrl:'/static/avatar2.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'01:00:23'},
					{_id:'6', name:'Firestone5',previewImg:'/static/play/item-bg-3.jpg', avatarUrl:'/static/avatar3.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:45:07'},
					{_id:'7', name:'Concerning Hobbits', previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: false, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:20:23'},
				],
				authorList: [
					[
						{_id:'1', name:'Workout Music', avatarUrl:'/static/avatar1.jpg', songCount:84},
						{_id:'2', name:'Deep House Remixes', avatarUrl:'/static/avatar2.jpg', songCount:280},
						{_id:'3', name:'Oldies', avatarUrl:'/static/avatar3.jpg', songCount:54},
					],[
						{_id:'3', name:'Oldies', avatarUrl:'/static/avatar3.jpg', songCount:54},
						{_id:'2', name:'Deep House Remixes', avatarUrl:'/static/avatar2.jpg', songCount:280},
						{_id:'1', name:'Workout Music', avatarUrl:'/static/avatar1.jpg', songCount:84},
					]
				]
			}
		},
		methods: {
			
		},
		onReachBottom(e) {
			this.footLoadStatus = 'loading'
			setTimeout(()=>{
				this.footLoadStatus = 'loaded'
			}, 2000)
			wx.createSelectorQuery().select('#mine-page').boundingClientRect(function (rect) {
				// 使页面滚动到底部
				setTimeout(()=>{
					wx.pageScrollTo({
						scrollTop: rect.bottom
					})
				}, 300)
			}).exec()
		}
	}
</script>

<style lang="scss">
.myheader-wraper{
	overflow: hidden;
	position: relative;
	.bg{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		filter: blur(10upx);
		transform: scale(1.2);
	}
	&::before{
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(79,44,150,0.5);
		z-index: 2;
	}
}
.info-wraper{
	position: relative;
	z-index: 3;
	.avatar-wraper{
		display: flex;
		justify-content: center;
		margin: 30upx 0;
		.avatar{
			font-size: 60upx;
		}
	}
	.name, .description{
		text-align: center;
	}
	.name{
		font-size: $font-size-lg + 10upx;
		letter-spacing: 2upx;
	}
	.description{
		font-size: 20upx;;
		opacity: .5;
		margin: 10upx 0 50upx;
	}
	.fans-focus-like{
		display: flex;
		text-align: center;
		.item{
			flex: 1;
			padding: 40upx 0;
		}
		text{
			display: block;
			font-size: $font-size-sm;
			color: rgba(255,255,255,0.8);
			margin-top: 6upx;
		}
	}
	.list-title{
		text-align: center;
		font-size: $font-size-sm;
		background: rgba(0,0,0,0.4);
		padding: 30upx 0;
		letter-spacing: 2upx;
	}
}
.mine-page{
	width: 100%;
	overflow-x: hidden;
	.swipout-item{
		padding: 0 60upx;
		&:last-of-type{
			.play-item, .author-item{
				border: 0;
			}
		}
	}
	.cancel-btn{
		height: 100%;
		background: $primary-color;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $font-size-md;
	}
	.play-item, .author-item{
		border-bottom: solid 1upx rgba(255,255,255,0.2);
	}
	.myfans-list-wraper{
		padding: 0 60upx;
		.author-item:last-of-type{
			border: 0;
		}
	}
}
</style>
